<template>
  <div class="profit">
    <gltitle
      :titleSize="titleSize"
      :is_mt="is_mt"
      v-if="!$store.state.isApp"
    ></gltitle>
    <div
      :style="{ paddingTop: !$store.state.isApp ? '1.38rem' : '.2rem' }"
    ></div>
    <div class="profit-content">
      <div class="profit-tabbar">
        <div
          class="profit-tabbar-item"
          v-for="item in tabbar"
          :key="item.id"
          :class="{ active: type == item.type }"
          @click="handlertab(item.type)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="profit-from">
        <div class="profit-select">
          <span class="tips" v-if="productCode == 0">{{ tipmessage1 }}</span>
          <img src="../../assets/images/down.png" alt="" />
          <van-dropdown-menu
            class="select-list"
            :overlay="false"
            active-color="#2A64E4"
          >
            <van-dropdown-item
              v-model="productCode"
              :options="productlist"
              @change="handlerProduct"
            ></van-dropdown-item>
          </van-dropdown-menu>
        </div>
        <div class="profit-select" v-if="type == 2">
          <span class="tips" v-if="timeCode == 0">{{ tipmessage2 }}</span>
          <img src="../../assets/images/down.png" alt="" />
          <van-dropdown-menu
            class="select-list"
            :overlay="false"
            active-color="#2A64E4"
          >
            <van-dropdown-item
              v-model="timeCode"
              :options="timelist"
              @change="handlerRate"
            ></van-dropdown-item>
          </van-dropdown-menu>
        </div>
        <div class="profit-select" v-if="type == 1">
          <input
            type="text"
            :placeholder="tipmessage2"
            v-model="dayname"
            @change="handlerDays"
            onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9] /g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            class="profit-input"
          />
        </div>

        <div class="profit-select">
          <input
            type="text"
            :placeholder="$t('profit.inputprice')"
            v-model="profitMoney"
            @change="handlerMoney"
            onkeyup="this.value= this.value.match(/\d+(\.\d{0,5})?/) ? this.value.match(/\d+(\.\d{0,5})?/)[0] : ''"
            class="profit-input"
          />
        </div>


        <div class="profit-select">
          <div class="profit-bg"></div>
          <input
            type="text"

            :placeholder="$t('profit.inputrate')"
            v-model="profiRate"
            class="profit-input"
          />
        </div>




        <div class="colorred" v-if="profitResult.expectedProfit != undefined">≈{{ profitResult.investUsdtAmount }} <span>USDT</span></div>
        <div class="profit-btn">
          <div @click="handlerPay"><span>{{ $t("profit.calculation") }}</span> </div>
          <div @click="handlerReset"><span> {{ $t("profit.Recalculation") }}</span></div>
        </div>
      </div>
    </div>
    <div class="profit-content" style="margin-top: 0.2rem">
      <div class="calculation-top">
        <img src="../../assets/images/result.png" alt="" /><span>{{
          $t("profit.result")
        }}</span
        ><img src="../../assets/images/result1.png" alt="" />
      </div>
      <div class="pofit-result">
        <div class="profit-result-item">
          <div class="item-left">
            <span>{{ $t("profit.productname") }}</span>
          </div>
          <div class="item-right cenline">
            <span>{{ profitResult.productName }}</span>
          </div>
        </div>
        <div class="profit-result-item">
          <div class="item-left">
            <span>{{ $t("profit.assets") }}</span>
          </div>
          <div class="item-right" v-if="profitResult.expectedProfitMax != undefined">
            <p>{{ profitResult.investAmount }}{{profitResult.coinName}}</p>
            <p class="colorred">≈{{ profitResult.investUsdtAmount }} <span>USDT</span></p>
          </div>
        </div>
        <div class="profit-result-item">
          <div class="item-left">
            <span>{{ $t("profit.revenue") }}</span>
          </div>
          <div class="item-right" v-if="profitResult.expectedProfit != undefined">
            <p>{{ profitResult.expectedProfit }}PAM</p>
            <p class="colorred">≈{{ profitResult.expectedUsdtProfit }} <span>USDT</span></p>
          </div>
        </div>
        <div class="profit-result-item">
          <div class="item-left">
            <span>{{ $t("profit.maxprofit") }}</span>
          </div>
          <div class="item-right" v-if="profitResult.expectedProfitMax != undefined">
            <p>{{ profitResult.expectedProfitMax }}PAM</p>
            <p class="colorred">
              ≈{{ profitResult.expectedUsdtProfitMax }}<span>USDT</span>
            </p>
          </div>
        </div>
      </div>
      <div class="profit-pay" @click="handlerOrder">
        {{ $t("profit.pay") }}
      </div>
    </div>
    <div class="profit-tips">
      <div v-html="$t('profit.doc1')"></div>
      <div v-html="$t('profit.doc2')"></div>
      <div v-html="$t('profit.doc3')"></div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";
Vue.use(DropdownMenu).use(DropdownItem);
export default {
  data() {
    return {
      tipmessage1: this.$t("profit.typetips"),
      tipmessage2: this.$t("profit.timetips"),
      profitMoney: "",
      profitMoneynum:'',
      iconName:"",
      profiRate: "",
      titleSize: this.$t("title.profit"),
      is_mt: true,
      type: 2,
      productCode: 0,
      timeCode: 0,
      productlist: [],
      timelist: [],
      profitResult: {},
      itemCode: "",
      days: "",
      dayname:"",
      tabbar: [
        {
          name: this.$tc("profit.tab", 1),
          type: 2,
        },
        {
          name: this.$tc("profit.tab", 2),
          type: 1,
        },
      ],
    };
  },
  created() {
    this.getType();
  },
  methods: {
    handlerMoney(val) {
        if(this.profitMoney.toString().split(".")[1] != undefined){
          this.profitMoney=this.profitMoney.substring(0, this.profitMoney.lastIndexOf(".") + 6)
        }
        this.profitMoneynum=this.profitMoney;
        this.profitMoney=this.$t("profit.assets")+':'+this.profitMoney+this.iconName
    },
      handlerDays(val) {
          if(this.dayname<7){
              this.dayname=this.$t('profit.currenttime',{n1:7});
              this.days=7;
          }else{
            this.days=this.dayname;
             this.dayname=this.$t('profit.currenttime',{n1:this.days});

          }
      },
    handlerOrder() {
      if (this.productCode == 0) {
        this.$toast(this.tipmessage1);
        return;
      }
      if (this.timeCode == 0) {
        this.$toast(this.tipmessage2);
        return;
      }
      if (this.profitMoney == "") {
        this.$toast(this.$t("profit.inputprice"));
        return;
      }
      if (this.$store.state.isApp) {
        let appResult = {
          code: this.CMD.app.REVENUE_ORDER,
          data: {
            productCode: this.productCode,
            amount: this.profitMoneynum,
            type: this.type,
          },
        };
        this.common.callBackApp(appResult);
        return;
      }
    },
    getType() {
      this.$post(this.URL.financial.productlist, { type: this.type }).then(
        (res) => {
          if (res.code == 0) {
            res.data.forEach((e) => {
              e.text = e.productName;
              e.value = e.productCode;
            });
            this.productlist = res.data;
          }
        }
      );
    },
    handlertab(type) {
      this.type = type;
      if (type == 1) {
        this.tipmessage1 = this.$t("profit.timetips1");
        this.tipmessage2 = this.$t("profit.inputprice1");
      } else {
        this.tipmessage1 = this.$t("profit.typetips");
        this.tipmessage2 = this.$t("profit.timetips");
      }
      this.handlerReset();
      this.getType();
    },
    handlerPay() {
      if (this.productCode == 0) {
        this.$toast(this.tipmessage1);
        return;
      }
      if (this.timeCode == 0) {
        this.$toast(this.tipmessage2);
        return;
      }
      if (this.profitMoney == "") {
        this.$toast(this.$t("profit.inputprice"));
        return;
      }

      let params = {
        itemCode: this.itemCode,
        amount: this.profitMoneynum,
        days: this.days,
      };
      this.$post(this.URL.financial.calculator, params).then((res) => {
        if (res.code == 0) {
          this.profitResult = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    handlerReset() {
      this.productCode = 0;
      this.timeCode = 0;
      this.profiRate = "";
      this.profitMoney = "";
      this.timelist = [];
      this.profitResult = {};
      this.days = "";
      this.dayname = "";
      this.itemCode = "";
    },
    handlerRate(value) {
      this.timelist.forEach((e) => {
        if (e.id == value) {
          this.profitResult = {};
          this.days = e.productPeriod;
          this.itemCode = e.itemCode;
         this.profitMoney='';
            this.profitMoneynum='';
          this.profiRate =this.$t('profit.minerrate',{n1:e.periodRate});
        }
      });
    },
    handlerProduct(value) {
      this.productlist.forEach((e) => {
        if (e.productCode == value) {
          this.iconName=e.coinName;
          e.items.forEach((item) => {
            item.text = this.$t("profit.timename", {
              n1: item.productPeriod,
              n2: item.startDate,
              n3: item.endDate,
            });
            item.value = item.id;
          });
          this.timelist = e.items;
          this.profitResult = {};
          if (this.type == 1) {
            //    this.$t("profit.inputrate") + ":" +
            this.profiRate = this.$t('profit.minerrate',{n1:e.items[0].periodRate});
            this.itemCode = e.items[0].itemCode;
            this.timeCode = 5;
          } else {
            this.profiRate = "";
            this.timeCode = 0;
            this.profitMoney='';
            this.profitMoneynum='';
          }
        }
      });
    },
  },
};
</script>
<style lang="less">
.van-dropdown-menu {
  width: 6.1rem;
  margin-left: 0.2rem;
  .van-dropdown-menu__bar {
    height: 0.8rem;
    box-shadow: none;
    text-align: center;
    background-color: rgba(0, 0, 0, 0);
    .van-dropdown-menu__item {
      padding: 0;
      justify-content: left;
      .van-ellipsis {
        font-size: 0.28rem;
        color: #333333;
        padding-right: 1rem;

      }

      .van-dropdown-menu__title {
        padding: 0;
        &::after {
          border: 0;
        }
      }

    }
  }
}
.van-popup--top {
  width: 6.5rem;
  margin: 0.1rem 0 0 0.5rem;
  border-radius: 0.14rem;
  border: 0.01rem solid #dfdfdf;
  .van-cell__title {
    font-size: 0.28rem;
    color: #333;
  }
  .van-cell__value{
            flex:0 0 .5rem;
        }
}
</style>
<style lang="less" scoped>
.profit {
  .profit-content {
    width: 7.1rem;
    margin: 0 auto;
    background: #fff;
    padding: 0.4rem 0;
    border-radius: 0.16rem;
    box-shadow: 0px 0 0.1rem 0rem rgba(0, 0, 0, 0.03);
    .profit-tabbar {
      padding: 0 0.3rem;
      display: flex;
      .profit-tabbar-item {
        flex: 1;
        padding-bottom: 0.15rem;
        position: relative;
        text-align: center;
        font-size: 0.28rem;
        color: #999999;
      }
      .active {
        font-weight: 700;
        color: #2A64E4;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 0.46rem;
          height: 0.06rem;
          background: #2A64E4;
          transform: translate(-50%, 0);
          border-radius: 0.3rem;
        }
      }
    }
    .profit-from {
      padding: 0.4rem 0.3rem 0;
      .profit-select {
        display: flex;
        position: relative;
        width: 100%;
        height: 0.84rem;
        margin-bottom: 0.2rem;
        border: 0.02rem solid #dfdfdf;
        border-radius: 0.12rem;
        box-sizing: border-box;
        .profit-bg{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: .84rem;
          z-index: 5;
        }
        .profit-input {
          flex: 1;
          padding: 0 0.25rem;
          height: 0.8rem;
          background: none;
          border: none;
          &::-webkit-input-placeholder {
            font-size: 0.28rem;
            color: #cccccc;
          }
          &:disabled{
            color: #333333;
          }
        }
        img {
          position: absolute;
          top: 0.35rem;
          right: 0.28rem;
          width: 0.24rem;
          height: 0.14rem;
          z-index: 5;
        }
        .tips {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          font-size: 0.28rem;
          color: #cccccc;
          height: .8rem;
          padding:0 0.25rem;
           display: flex;
          align-items: left;
          justify-content: space-around;
          flex-direction: column;
        }
      }
      .profit-btn {
        display: flex;
        margin-top: 0.3rem;
        font-size: 0.3rem;
        flex-direction: row;
        justify-content: space-between;
        div {
          flex: 0 0 3.15rem;
          height: 0.88rem;
          border: 0.01rem solid #2A64E4;
          text-align: center;
          border-radius: 0.12rem;
          box-sizing: border-box;
          color: #2A64E4;
          display: flex;
          align-items:center;
          justify-content: space-around;
          flex-direction: column;
          &:last-child {
            background: linear-gradient(-90deg, #053ac2 0%, #2295ed 100%);
            color: #fff;
            border: 0;
          }
        }
      }
    }
    .calculation-top {
      padding-bottom: 0.4rem;
      text-align: center;
      span {
        padding: 0 0.18rem;
        font-size: 0.32rem;
        color: #222222;
        font-weight: 500;
      }
      img {
        width: 0.23rem;
        height: 0.18rem;
        vertical-align: middle;
      }
    }
    .pofit-result {
      padding: 0 0.3rem;
      .profit-result-item {
        display: flex;
        font-size: 0.28rem;
        color: #999999;
        line-height: .3rem;
        padding: .08rem 0;
        .item-left {
          flex: 0 0 2rem;
          display: flex;
          align-items: left;
          justify-content: space-around;
          flex-direction: column;
        }
        .item-right {
          flex: 1;
          text-align: right;
          color: #222222;
          line-height: .3rem;
        }
        .cenline {
          display: flex;
          align-items: left;
          justify-content: space-around;
          flex-direction: column;
        }
        &:first-child {
          border-top: 0.01rem solid #ededed;
          padding-top: .3rem;
        }
      }
    }
    .profit-pay {
      margin: 0.4rem auto 0;
      width: 6.5rem;
      height: 0.88rem;
      font-size: 0.3rem;
      color: #fff;
      line-height: 0.88rem;
      background: linear-gradient(-90deg, #053ac2 0%, #2295ed 100%);
      border-radius: 0.12rem;
      text-align: center;
    }
  }
  .profit-tips {
    padding: 0.38rem 0.4rem 0.58rem;
    font-size: 0.24rem;
    color: #999999;
    div {
      margin-bottom: 0.1rem;
    }
  }
  .colorred {
            color: #e5282c;
            span{
                font-size: .2rem;
            }
          }
}
</style>
